<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      user-select: none;
    }

    #app {
      display: flex;
      justify-content: space-around;
      align-items: flex-start;

    }

    ul {

      background-color: #fff;
    }

    canvas {
      background-color: #fff;
      border: 1px solid black;
    }

    input[type='radio'] {
      display: none;
    }

    label.checked {
      background-color: skyblue;
    }

    label {
      display: inline-block;
      width: 120px;
      height: 40px;
      font-size: 20px;
      line-height: 40px;
      border: 1px solid black;
      text-align: center;
      cursor: pointer;
    }

    li {
      margin-bottom: 20px;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div id="app">
    <ul>
      <li class="shape">
        <label for="s-pen" class="checked"><input type="radio" name="shape" value="pen" id="s-pen" /> 铅笔</label>
        <label for="s-line"><input type="radio" name="shape" value="line" id="s-line" /> 直线</label>
        <label for="s-rect"><input type="radio" name="shape" value="rect" id="s-rect" /> 矩形</label>
        <label for="s-circle"><input type="radio" name="shape" value="circle" id="s-circle" /> 圆形</label>
      </li>
      <li class="border">
        <label for="b-true" class="checked"><input type="radio" name="border" value="true" id="b-true" />边框</label>
        <label for="b-false"><input type="radio" name="border" value="false" id="b-false" />无边框</label>
      </li>
      <li class="fill">
        <label for="f-true"><input type="radio" name="fill" value="true" id="f-true" /> 填充</label>
        <label for="f-false" class="checked"><input type="radio" name="fill" value="false" id="f-false" />无填充</label>
      </li>
      <li>
        边框色 <input type="color" id="bordercolor" value="#000000">
      </li>
      <li>
        填充色 <input type="color" id="fillcolor" value="#ffffff">
      </li>
      <li>
        线宽 <input id="linewidth" type="range" min="2" max="30" step="1" value="2"></input>
      </li>
      <li>
        <label id="clear">清空</label>
        <label id='back'>撤销</label>
        <label id='save'>下载</label>
      </li>
    </ul>
    <canvas class="canvas" width="1000" height="600"></canvas>

  </div>
  <script src="./CanvasBoard.js"></script>
  <script>
    const board = new CanvasBoard('.canvas', {
      ifBorder: true,
      // 是否填充
      ifFill: false,
      // 绘制图形选择
      shape: 'pen',
      // 外边框颜色
      strokeStyle: '#000',
      //  填充色
      fillStyle: '#fff',
      // 线条宽度
      lineWidth: '2',
    });
    const slabel = document.querySelector('.shape').children;
    const blabel = document.querySelector('.border').children;
    const flabel = document.querySelector('.fill').children;
    const borderc = document.querySelector('#bordercolor')
    const fillc = document.querySelector('#fillcolor')
    const lw = document.querySelector('#linewidth')
    const oclear = document.querySelector('#clear')
    const oback = document.querySelector('#back')
    const osave = document.querySelector('#save')

    function radioEvent(s) {
      s.addEventListener('click', e => {
        if (e.target.nodeName === 'LABEL') {
          [...e.target.parentNode.children].forEach(s => {
            s.classList.remove('checked')
          })
          e.target.classList.add('checked');
          if (e.target.parentNode.classList.contains('shape'))
            board.setShape(e.target.children[0].value);
          else if (e.target.parentNode.classList.contains('border')) {
            board.setIfBorder(e.target.children[0].value === 'true' ? true : false)
          } else if (e.target.parentNode.classList.contains('fill')) {
            board.setIfFill(e.target.children[0].value === 'true' ? true : false)
          }
        }
      })
    }
    [...slabel].forEach(radioEvent);
    [...blabel].forEach(radioEvent);
    [...flabel].forEach(radioEvent);


    borderc.addEventListener('change', e => {
      board.setBorderColor(e.target.value)
    })
    fillc.addEventListener('change', e => {
      board.setFillColor(e.target.value)
    })
    lw.addEventListener('change', e => {
      board.setLineWidth(e.target.value)
    })
    oclear.addEventListener('click', e => {
      board.clearBoard();
    })
    oback.addEventListener('click', e => {
      board.back();
    })
    osave.addEventListener('click', e => {
      board.save();
    })
  </script>
</body>
</html>
